<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="商品导入">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        .step-div{
            overflow: hidden;
        }
        .step-div>div{
            float: left;
        }

        .step-box-line{
            padding: 120px 10px 0px 10px;
            font-size: 40px;
            color: #5FB878;
        }

        .step-box{
            width: 150px;
        }
        .step-index {
            margin:0 auto;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-weight: bold;
            background-color: #5FB878;
            color: #ffffff;
            border-radius: 50%;
            border: 2px #ffffff solid;
            text-align: center;
            z-index: 10000;

            /**上移元素**/
            transform:translateY(20px);
            -ms-transform:translateY(20px);
            -webkit-transform:translateY(20px);
        }
        .step-icon {
            margin:0 auto;
            top: 20px;
            width: 150px;
            height: 110px;
            line-height: 130px;
            background-color: #5FB878;
            color: #ffffff;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            font-weight: bold;
            font-size: 60px;
            text-align: center;
            z-index: 19;
        }
        .step-button{
            width: 150px;
            height: 80px;
            line-height: 80px;
            background-color: #eeeeee;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            text-align: center;
        }

        .step-help{
        }
        .step-help li{
            padding: 3px ;
            color: #666666;
            font-size: 12px;
        }
    </style>

    <script>
        jQuery(function () {
            $("#downTemplate").click(function () {
                downloadFileByForm("${baseUrl}file/excel/goods/template.action");
            });

            $("#importExcel").click(function (e) {
                $("#excelFile").click();
                e.preventDefault();
            });

            $("#excelFile").change(function (e) {
                var files = this.files;
                var file;
                if (files && files.length) {
                    file = files[0];
                }

                if(file == undefined) {
                    return;
                }

                tipLoad("导入处理中,请稍后");
                var formData = new FormData();
                formData.append("excelFile", document.getElementById("excelFile").files[0]);
                $("#excelFile").val("");
                $.ajax({
                    url:'${baseUrl}goods/goods/importGoods.action',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData : false,
                    contentType : false,
                    success : function(res) {
                        closeAll();
                        if (res.code == 1){
                            refreshMainIframe("${baseUrl}goods/goods.action");
                        } else if(res.code == 3){
                            processFailInfo("以下商品不允许导入,原因如下", res.data);
                        }else{
                            errTip(res.msg);
                        }
                    },
                    error : function(res) {
                        closeAll();
                        tip("出错！！");
                    }
                });
            });
        });
    </script>

</html:header>
<body style="background-color: white">
<div class="layuimini-container">
    <div class="layuimini-main">
        <div style="display: none">
            <form enctype="multipart/form-data">
                <%--只能选择.xlsx格式的文件--%>
                <input type="file" id="excelFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
            </form>
        </div>

        <blockquote class="layui-elem-quote layui-text">
            <span style="color: #FF5722;">重要!!!导入时本公司其他人员不可以新增商品</span>
        </blockquote>

        <h1 style="padding: 20px 0 10px 0;">导入商品资料</h1>

        <div class="step-div">
            <div class="step-box">
                <div class="step-index">1</div>
                <div class="step-icon"><i class="fa fa-file-excel-o"></i></div>
                <div class="step-button">
                    <div><button class="layui-btn layui-btn-primary" id="downTemplate">下载模板</button></div>
                </div>
            </div>

            <div class="step-box-line">
                <i class="fa fa-long-arrow-right"></i>
            </div>

            <div class="step-box">
                <div class="step-index">2</div>
                <div class="step-icon"><i class="fa fa-cloud-upload"></i></div>
                <div class="step-button">
                    <div><button id="importExcel" class="layui-btn layui-btn-primary" >上传文件</button></div>
                </div>
            </div>

            <div class="step-help" style="padding: 60px 0 0 40px ">
                <h2>导入指引</h2>
                <ul>
                    <li>1、选择或自定义您需要的模板并下载</li>
                    <li>2、填写Excel表格</li>
                    <li>3、“点击上传文件” ---> “选择导入文件” ---> 确认导入 ---> 成功！</li>
                </ul>
            </div>
        </div>

        <hr style="margin: 40px 0 10px 0">

        <h2>说明</h2>
        <div class="step-help">
            <ul>
                <li>1.“商品名称”、“基本单位”、“基本条码”为必填项</li>
                <li>2.如您填写的“商品编号”或“基本条码”与系统内的重复，则舍弃</li>
                <li>3.如您填写的“商品编号”或“基本条码”与系统内的不重复，但表格内数据有重复，则会取第一条数据</li>
                <li>4.“基本单位”需为最小单位，“副单位与基本单位换算关系”需为大于0的整数，若未填写换算关系，则默认为1</li>
                <li>5.“分类”一栏若未填写，则会自动默认值</li>
                <li>6.“商品编号”一栏若未填写，则系统自动生成</li>
            </ul>
        </div>


    </div>
</div>

</body>

<html:failInfoDialog/>

<html:loading/>

</html>